<template>
  <div id="hotMoviePage">
    <h1>热门电影Top10</h1>
    <el-card
      class="custom-card"
      v-for="item in dataList"
      :key="item.movieVO?.id"
      :span="12"
      :id="item.movieVO?.id"
      style="margin-bottom: 16px"
    >
      <el-row class="grid-demo" style="margin-bottom: 16px">
        <el-col :span="6" class="content-wrapper">
          <img
            :src="item.movieVO?.movieIcon"
            style="width: 100%; height: auto"
            alt="poster"
            @click="goToMovie(item.movieVO?.id as number)"
          />
        </el-col>
        <el-col :span="6" class="content-wrapper">
          <h2>{{ item.movieVO?.movieName }}</h2>
          <p>
            上映时间：{{
              dayjs(item.movieVO?.releaseDate).format("YYYY-MM-DD")
            }}
          </p>
        </el-col>
        <el-col :span="12">
          <h3 class="container">
            票房：
            <div style="font-size: larger">{{ item.showCount }}</div>
          </h3>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, watchEffect } from "vue";
import API from "@/api";
import {
  listHostMovieVoUsingGet,
  listMovieVoByPageUsingPost,
} from "@/api/movieController";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";
import { useRouter } from "vue-router";

const dataList = ref<API.HotMovieVO[]>([]);

/**
 * 加载数据
 */
const loadData = async () => {
  const res = await listHostMovieVoUsingGet();
  if (res.data.code === 0) {
    dataList.value = res.data.data || [];
  } else {
    ElMessage({
      message: "获取数据失败，" + res.data.message,
      type: "error",
    });
  }
};

watchEffect(() => {
  loadData();
});
const router = useRouter();
const goToMovie = (id: number) => {
  router.push(`/movie/detail/${id}`);
};
</script>

<style scoped>
#hotMoviePage {
  .custom-card {
    position: relative;
  }

  .container {
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    height: 200px;
  }
}

#hotMoviePage .content-wrapper > p {
  margin-bottom: 24px;
}
</style>
